<%= form_tag import_path, multipart: true, id: 'import_form', class: 'import-form-with-progress' do %>
  <div class="panel">
    <h3><%= title %></h3>
    
    <div class="panel_contents">
      <% if instructions.present? %>
        <div class="instructions">
          <h4>导入说明</h4>
          <ul>
            <% instructions.each do |instruction| %>
              <li><%= instruction %></li>
            <% end %>
          </ul>
        </div>
      <% end %>
      
      <!-- 进度提示区域 -->
      <div id="import_progress" class="import-progress-container" style="display: none;">
        <div style="display: flex; align-items: center; gap: 10px;">
          <div class="spinner"></div>
          <div>
            <strong>正在导入数据，请稍候...</strong>
            <div id="progress_message" class="progress-message">
              正在处理您的文件，请不要关闭页面或重复点击
            </div>
          </div>
        </div>
        <div id="progress_details" class="progress-details">
          <!-- 这里会显示详细的进度信息 -->
        </div>
      </div>
      
      <!-- 错误提示区域 -->
      <div id="import_error" class="import-error-container" style="display: none;">
        <strong style="color: #d32f2f;">导入过程中出现错误</strong>
        <div id="error_message" style="margin-top: 5px; color: #666;"></div>
      </div>
      
      <div class="form-inputs">
        <div class="input file">
          <label for="file">选择文件</label>
          <%= file_field_tag :file, required: true, accept: '.csv,.xlsx,.xls', id: 'file_input' %>
          <div class="file-format-hint">
            支持格式：CSV, Excel (.xlsx, .xls)
          </div>
        </div>
        
        <div class="input checkbox">
          <label>
            <%= check_box_tag :skip_existing, '1', false, id: 'skip_existing_checkbox' %>
            跳过已存在的记录（推荐用于大文件导入以提升速度）
          </label>
          <div class="checkbox-hint">
            勾选此选项将跳过已存在的记录，只导入新记录。适用于增量导入场景。
          </div>
        </div>
      </div>
      
      <div class="form-actions">
        <%= submit_tag "导入", class: "button", id: "import_submit_btn" %>
        <%= link_to "取消", cancel_path, class: "button" %>
      </div>
    </div>
  </div>
<% end %>

<%= content_for :head do %>
  <style>
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .spinner {
      width: 20px;
      height: 20px;
      border: 2px solid #f3f3f3;
      border-top: 2px solid #2196f3;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    .import-progress-container {
      margin: 20px 0;
      padding: 15px;
      background: #e3f2fd;
      border-radius: 5px;
      border-left: 4px solid #2196f3;
    }
    
    .import-error-container {
      margin: 20px 0;
      padding: 15px;
      background: #ffebee;
      border-radius: 5px;
      border-left: 4px solid #f44336;
    }

    .progress-message {
      font-size: 14px;
      color: #666;
      margin-top: 5px;
    }

    .progress-details {
      margin-top: 10px;
      font-size: 12px;
      color: #888;
    }

    .file-format-hint {
      font-size: 12px;
      color: #666;
      margin-top: 5px;
    }

    .button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      background-color: #ccc !important;
    }

    .import-form-with-progress.importing .button {
      pointer-events: none;
      opacity: 0.6;
    }

    .file-info {
      margin-top: 8px;
      padding: 10px;
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      border-radius: 5px;
      font-size: 13px;
      border-left: 4px solid #4CAF50;
    }

    .file-info-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .file-info-highlight {
      margin-top: 8px;
      padding: 6px;
      background: rgba(76, 175, 80, 0.1);
      border-radius: 3px;
      color: #2e7d32;
      font-size: 12px;
    }
    
    .input.checkbox {
      margin: 15px 0;
      padding: 12px;
      background: #f8f9fa;
      border-radius: 5px;
      border-left: 3px solid #28a745;
    }
    
    .input.checkbox label {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-weight: 500;
      color: #495057;
      cursor: pointer;
    }
    
    .input.checkbox input[type="checkbox"] {
      margin: 0;
      transform: scale(1.2);
    }
    
    .checkbox-hint {
      margin-top: 5px;
      font-size: 12px;
      color: #6c757d;
      line-height: 1.3;
    }

    @media (max-width: 768px) {
      .file-info-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
<% end %>